<script setup lang="ts">
import {
  ControlOutlined,
  GlobalOutlined,
  UnlockOutlined,
  BugOutlined,
  BranchesOutlined,
  RetweetOutlined,
  RadarChartOutlined,
  BugTwoTone
} from "@ant-design/icons-vue";
defineOptions({
  name: "GatherSix"
});
defineProps({
  class: {
    type: String,
    default: "gather-box-success"
  }
});
</script>

<template>
  <div class="gather-four">
    <el-row :gutter="10" v-if="true">
      <el-col v-motion :xs="6" :sm="6" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">294</h3>
          <h5 class="gather-name">资产数值</h5>
          <!-- <UnlockOutlined class="gather-box-icon" /> -->
          <i class="iconfont icon-yuming" />
        </div>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">212</h3>
          <h5 class="gather-name">poc告警</h5>
          <BugOutlined class="gather-box-icon" />
        </div>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">712</h3>
          <h5 class="gather-name">http告警</h5>
          <RadarChartOutlined class="gather-box-icon" />
        </div>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">337</h3>
          <h5 class="gather-name">云告警</h5>
          <RetweetOutlined class="gather-box-icon" />
        </div>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">127</h3>
          <h5 class="gather-name">http告警</h5>
          <!-- <BranchesOutlined class="gather-box-icon" /> -->
          <i class="iconfont icon-anquanqingbao-1" />
        </div>
      </el-col>
      <el-col v-motion :xs="12" :sm="12" :md="6" :lg="4" :xl="4" :offset="0">
        <div class="gather-box" :class="class">
          <h3 class="gather-value">323</h3>
          <h5 class="gather-name">端口告警</h5>
          <i class="iconfont icon-duankou" />
          <!-- <ControlOutlined class="gather-box-icon" /> -->
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- <div>
    <UnlockOutlined />
    <GlobalOutlined />
    <BugOutlined />
    <BugTwoTone />
    <BranchesOutlined />
    <ControlOutlined />
    <BlockOutlined />
    <RadarChartOutlined />
    <CopyOutlined />
    <RetweetOutlined />
  </div> -->
</template>

<style lang="scss" scoped>
.gather-four {
  .gather-box {
    height: 100px;
    padding-top: 15px;
    background: white;
    position: relative;

    h3 {
      margin: 0 0 0 20px;
      font-size: 30px;
    }
    h5 {
      margin: 10px 0 0 20px;
      color: black;
    }
  }

  .gather-box-success {
    color: #67c23a;
    border: 1px solid #67c23a;
    border-radius: 3px;
  }

  .gather-box-primary {
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 3px;
  }

  .gather-box-warning {
    color: #e6a23c;
    border: 1px solid #e6a23c;
    border-radius: 3px;
  }

  .gather-box-blue {
    color: #13c2c2;
    border: 1px solid #13c2c2;
    border-radius: 3px;
  }
  .gather-box-purple {
    color: #722ed1;
    border: 1px solid #722ed1;
    border-radius: 3px;
  }

  .gather-box-icon {
    font-size: 50px;
    position: absolute;
    top: 25px;
    right: 25px;
  }

  i.iconfont {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    top: 25px;
    right: 25px;
  }
}
</style>
